<script setup lang="ts">
import { ref, watch } from "vue";
import { PureTableBar } from "@/components/RePureTableBar";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import Refresh from "@iconify-icons/ep/refresh";

defineOptions({
  name: "MaterialCenter"
});

const formRef = ref();
const tableRef = ref();
const dialogVisible = ref(false);

const form = ref({
  name: "",
  advertiserId: ""
});

const loading = ref(false);

const columns = ref([
  {
    label: "名称",
    prop: "name",
    width: 200
  },
  {
    label: "ID",
    prop: "id",
    width: 150
  },
  {
    label: "类型",
    prop: "type"
  },
  {
    label: "状态",
    prop: "status",
    slot: true
  },
  {
    label: "覆盖数量",
    prop: "coverage"
  },
  {
    label: "归属账户",
    prop: "advertiser"
  },
  {
    label: "创建时间",
    prop: "createTime",
    width: 180
  }
]);

const dataList = ref([
  {
    name: "KN_73476451_21 90307286_BR_19星_Y5.0116(日)",
    id: "1123462173",
    type: "自定义人群",
    status: "已生效",
    coverage: "12,321",
    advertiser: "广告账户：XXXXXX\n账户ID：123123213",
    createTime: "YYYY/MM/DD HH:MM:SS"
  },
  {
    name: "KN_73476451_21 90307286_BR_19星_Y5.0116(日)",
    id: "9372462173",
    type: "自定义人群",
    status: "已失效",
    coverage: "231",
    advertiser: "",
    createTime: "YYYY/MM/DD HH:MM:SS"
  },
  {
    name: "KN_73476451_21 90307286_BR_19星_Y5.0116(日)",
    id: "2923462982",
    type: "自定义人群",
    status: "已删除",
    coverage: "23",
    advertiser: "",
    createTime: "YYYY/MM/DD HH:MM:SS"
  }
]);

const pagination = ref({
  total: 100,
  pageSize: 10,
  currentPage: 1
});

const handleSizeChange = (val: number) => {
  pagination.value.pageSize = val;
};

const handleCurrentChange = (val: number) => {
  pagination.value.currentPage = val;
};

const onSearch = () => {
  loading.value = true;
  setTimeout(() => {
    loading.value = false;
  }, 500);
};

const resetForm = formEl => {
  if (!formEl) return;
  formEl.resetFields();
};

const handleUpload = () => {
  // 处理上传素材的逻辑
  console.log("上传素材");
};

const templateForm = ref({
  模版名称: "",
  营销目标: {
    营销目标: "",
    推广对象: ""
  },
  广告计划设置: {
    出价策略: "",
    计划预算优化: false,
    每日预算: "",
    计划名称: ""
  },
  网站推广: {
    链接类型: "落地页",
    网站链接: "",
    KingProduct: ""
  },
  目标人群: {
    目标定义: "",
    人群类型: "",
    人群特征: "",
    年龄: "",
    性别: "",
    语言: "",
    投放价格: ["", ""],
    操作系统: "",
    手机品牌: "",
    网络环境: ""
  },
  预算和排期: {
    每日预算: {
      type: "每日固定预算",
      value: ""
    },
    排期时间: {
      type: "设定具体投放时间",
      startDate: "",
      endDate: "",
      dateRange: [] as string[]
    },
    投放时间: {
      type: "全天",
      value: ""
    }
  },
  优化目标和计费: {
    优化目标: "",
    计费方式: "oCPM",
    目标优化成本: ""
  },
  广告组名称: {
    广告组: ""
  },
  创意类型: {
    创意类型选择: "固定文创意",
    广告板式选择: "序列"
  },
  制作创意内容: {
    知识内容: "选择内容",
    广告语: "",
    描述: "",
    行动号召按钮: "",
    Deeplink: "",
    应用名称: ""
  }
});

const handleCreate = () => {
  dialogVisible.value = true;
};

const handleSave = () => {
  console.log("保存模版", templateForm.value);
  dialogVisible.value = false;
};

const handleCancel = () => {
  dialogVisible.value = false;
};

watch(
  () => templateForm.value.预算和排期.排期时间.dateRange,
  newVal => {
    if (newVal && newVal.length === 2) {
      templateForm.value.预算和排期.排期时间.startDate = newVal[0];
      templateForm.value.预算和排期.排期时间.endDate = newVal[1];
    }
  }
);
</script>

<template>
  <div class="main">
    <el-form
      ref="formRef"
      :inline="true"
      :model="form"
      class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px] overflow-auto"
    >
      <el-form-item prop="name">
        <el-input
          v-model="form.name"
          placeholder="通过人群包名称搜索"
          clearable
          class="!w-[240px]"
        />
      </el-form-item>
      <el-form-item prop="advertiserId">
        <el-select
          v-model="form.advertiserId"
          placeholder="通过广告账户筛选"
          clearable
          class="!w-[240px]"
        >
          <el-option label="全部" value="" />
        </el-select>
      </el-form-item>
    </el-form>

    <PureTableBar :columns="columns" @refresh="onSearch">
      <template #buttons>
        <el-button type="primary" @click="handleCreate">
          创建广告模版
        </el-button>
      </template>
      <template v-slot="{ size, dynamicColumns }">
        <pure-table
          ref="tableRef"
          align-whole="center"
          showOverflowTooltip
          table-layout="auto"
          :loading="loading"
          :size="size"
          adaptive
          :adaptiveConfig="{ offsetBottom: 200 }"
          :data="dataList"
          :columns="dynamicColumns"
          :pagination="pagination"
          :paginationSmall="size === 'small' ? true : false"
          :header-cell-style="{
            background: 'var(--el-fill-color-light)',
            color: 'var(--el-text-color-primary)'
          }"
          @page-size-change="handleSizeChange"
          @page-current-change="handleCurrentChange"
        >
          <template #status="{ row }">
            <el-tag
              :type="
                row.status === '已生效'
                  ? 'success'
                  : row.status === '已失效'
                    ? 'danger'
                    : 'info'
              "
              size="small"
            >
              {{ row.status }}
            </el-tag>
          </template>
        </pure-table>
      </template>
    </PureTableBar>

    <el-dialog
      v-model="dialogVisible"
      title="创建广告模版"
      width="80%"
      :close-on-click-modal="false"
    >
      <el-form :model="templateForm" label-width="120px" class="template-form">
        <!-- 模版名称 -->
        <el-form-item label="模版名称">
          <el-input v-model="templateForm.模版名称" />
        </el-form-item>

        <!-- 营销目标 -->
        <el-divider content-position="left">营销目标</el-divider>
        <el-form-item label="营销目标">
          <el-select v-model="templateForm.营销目标.营销目标" class="w-full">
            <el-option label="选项1" value="选项1" />
          </el-select>
        </el-form-item>
        <el-form-item label="推广对象">
          <el-select v-model="templateForm.营销目标.推广对象" class="w-full">
            <el-option label="选项1" value="选项1" />
          </el-select>
        </el-form-item>

        <!-- 广告计划设置 -->
        <el-divider content-position="left">广告计划设置</el-divider>
        <el-form-item label="出价策略">
          <el-select
            v-model="templateForm.广告计划设置.出价策略"
            class="w-full"
          >
            <el-option label="选项1" value="选项1" />
          </el-select>
        </el-form-item>
        <el-form-item label="计划预算优化">
          <el-switch v-model="templateForm.广告计划设置.计划预算优化" />
        </el-form-item>
        <el-form-item label="每日预算">
          <el-input v-model="templateForm.广告计划设置.每日预算" type="number">
            <template #append>USD</template>
          </el-input>
        </el-form-item>
        <el-form-item label="计划名称">
          <el-input v-model="templateForm.广告计划设置.计划名称" />
        </el-form-item>

        <!-- 网站推广 -->
        <el-divider content-position="left">网站推广/应用推广</el-divider>
        <el-form-item label="链接类型">
          <el-radio-group v-model="templateForm.网站推广.链接类型">
            <el-radio label="落地页">落地页</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="网站链接">
          <el-input v-model="templateForm.网站推广.网站链接" />
        </el-form-item>
        <el-form-item label="King Product">
          <el-select v-model="templateForm.网站推广.KingProduct" class="w-full">
            <el-option label="选项1" value="选项1" />
          </el-select>
        </el-form-item>

        <!-- 目标人群 -->
        <el-divider content-position="left">目标人群</el-divider>
        <el-form-item label="目标定义">
          <el-select v-model="templateForm.目标人群.目标定义" class="w-full">
            <el-option label="选项1" value="选项1" />
          </el-select>
        </el-form-item>
        <el-form-item label="人群类型">
          <el-select v-model="templateForm.目标人群.人群类型" class="w-full">
            <el-option label="选项1" value="选项1" />
          </el-select>
        </el-form-item>
        <el-form-item label="人群特征">
          <el-select v-model="templateForm.目标人群.人群特征" class="w-full">
            <el-option label="选项1" value="选项1" />
          </el-select>
        </el-form-item>
        <el-form-item label="年龄">
          <el-select v-model="templateForm.目标人群.年龄" class="w-full">
            <el-option label="选项1" value="选项1" />
          </el-select>
        </el-form-item>
        <el-form-item label="性别">
          <el-select v-model="templateForm.目标人群.性别" class="w-full">
            <el-option label="选项1" value="选项1" />
          </el-select>
        </el-form-item>
        <el-form-item label="语言">
          <el-select v-model="templateForm.目标人群.语言" class="w-full">
            <el-option label="选项1" value="选项1" />
          </el-select>
        </el-form-item>
        <el-form-item label="投放价格">
          <el-input-number
            v-model="templateForm.目标人群.投放价格[0]"
            class="mr-2"
          />
          <el-input-number v-model="templateForm.目标人群.投放价格[1]" />
          <span class="ml-2">USD</span>
        </el-form-item>

        <!-- 预算和排期 -->
        <el-divider content-position="left">预算和排期</el-divider>
        <el-form-item label="每日预算">
          <el-radio-group v-model="templateForm.预算和排期.每日预算.type">
            <el-radio label="每日固定预算">每日固定预算</el-radio>
            <el-radio label="固定总预算">固定总预算</el-radio>
            <el-radio label="不限">不限</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="排期时间">
          <el-radio-group v-model="templateForm.预算和排期.排期时间.type">
            <el-radio label="设定具体投放时间">设定具体投放时间</el-radio>
            <el-radio label="长期投放">长期投放</el-radio>
          </el-radio-group>
          <el-date-picker
            v-if="templateForm.预算和排期.排期时间.type === '设定具体投放时间'"
            v-model="templateForm.预算和排期.排期时间.dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            class="w-full mt-2"
          />
        </el-form-item>

        <!-- 优化目标和计费 -->
        <el-divider content-position="left">优化目标和计费</el-divider>
        <el-form-item label="优化目标">
          <el-select
            v-model="templateForm.优化目标和计费.优化目标"
            class="w-full"
          >
            <el-option label="选项1" value="选项1" />
          </el-select>
        </el-form-item>
        <el-form-item label="计费方式">
          <el-radio-group v-model="templateForm.优化目标和计费.计费方式">
            <el-radio label="oCPM">oCPM</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="目标优化成本">
          <el-input
            v-model="templateForm.优化目标和计费.目标优化成本"
            type="number"
          >
            <template #append>USD</template>
          </el-input>
        </el-form-item>

        <!-- 广告组名称 -->
        <el-divider content-position="left">广告组名称</el-divider>
        <el-form-item label="广告组">
          <el-input v-model="templateForm.广告组名称.广告组" />
        </el-form-item>

        <!-- 创意类型 -->
        <el-divider content-position="left">创意类型</el-divider>
        <el-form-item label="创意类型选择">
          <el-radio-group v-model="templateForm.创意类型.创意类型选择">
            <el-radio label="固定文创意">固定文创意</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="广告板式选择">
          <el-radio-group v-model="templateForm.创意类型.广告板式选择">
            <el-radio label="序列">序列</el-radio>
          </el-radio-group>
        </el-form-item>

        <!-- 制作创意内容 -->
        <el-divider content-position="left">制作创意内容</el-divider>
        <el-form-item label="知识内容">
          <el-radio-group v-model="templateForm.制作创意内容.知识内容">
            <el-radio label="选择内容">选择内容</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="广告语">
          <el-input v-model="templateForm.制作创意内容.广告语" />
        </el-form-item>
        <el-form-item label="描述">
          <el-input v-model="templateForm.制作创意内容.描述" type="textarea" />
        </el-form-item>
        <el-form-item label="行动号召按钮">
          <el-select
            v-model="templateForm.制作创意内容.行动号召按钮"
            class="w-full"
          >
            <el-option label="选项1" value="选项1" />
          </el-select>
        </el-form-item>
        <el-form-item label="Deeplink">
          <el-input v-model="templateForm.制作创意内容.Deeplink" />
        </el-form-item>
        <el-form-item label="应用名称">
          <el-input v-model="templateForm.制作创意内容.应用名称" />
        </el-form-item>
      </el-form>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleCancel">取消</el-button>
          <el-button type="primary" @click="handleSave">保存模版</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped lang="scss">
.search-form {
  :deep(.el-form-item) {
    margin-bottom: 12px;
  }
}

.template-form {
  max-height: 60vh;
  overflow-y: auto;
  padding: 0 20px;

  :deep(.el-divider__text) {
    font-weight: bold;
  }

  :deep(.el-form-item) {
    margin-bottom: 16px;
  }
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}
</style>
